﻿<!DOCTYPE html>
<html>
    <head>
        <title>Защита</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jq.js" > </script>
        <script type="text/javascript"> 
            function show_alert() {
                alert("Helo world");                
            }
            function show_first(){
                $("#2").show("slow");
            }
            function show_banners(){
                var show = $("#1").css("display");
                //alert(show);
                if(show=='block'){
                    $("#1").hide("slow");
                    $("#2").hide("slow");
                    $("#3").hide("slow");
                    show--;
                } 
                if(show == 'none'){
                    $("#1").show("slow");
                    $("#3").show("slow");
                    show++;
                }
                
            }
        </script>
        <style type="text/css"> 

            .pos:hover {
                cursor: pointer; 
            }
            .pos {
                margin-left: -200px;
                border: 1px solid red;
                background: #ccc;
                padding: 3px;
                width: 400px;
                margin-top: 10px;
                
                display: none;
                
            }
            #blocks {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -100px;
            }
        </style>
        
    </head>
    <body onload="show_first();">
        <div id="blocks">
            <div id="1"  class="pos" onclick="show_banners();">приветики))!</div>
            <div id="2"  class="pos" onclick="show_banners();">Как дела??</div>
            <div id="3"  class="pos" onclick="show_banners();">Текст баннера</div>
        </div>
    </body>
</html>
